<template>
  <div class="play-conatienr">
    <div class="play-header">
      <el-button :icon="Back" circle @click="backHandler" />
      <h3>{{ getFileNameWithoutExtName(resourceData.realName) }}</h3>
    </div>
    <div class="play-main-container">
      <VideoPlayer :src="resourceData.path" @onTimeUpdate="ontimeupdateHandler" @play="onPlayHandler"
                   @pause="onPauseHandler"
                   @onend="onEndHandler" />
    </div>
    <div class="comment-list-container">
      <div class="user-comment-form">
        <div>
          <el-avatar :src="userStore.avatar" />
          <h1 class="ml10">评论：</h1>
        </div>
        <el-input v-model="commentText" placeholder="请写下你的看法" />
        <el-button :disabled="!commentText" @click="sendComment">发布评论</el-button>
      </div>
      <div v-for="(item,index) in commentsData" :key="index">
        <CourseComment :comment="item" :relation-id="relationId" @replay-other-comment="replayOtherUserHandler"/>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { computed, onMounted, ref } from 'vue'
import { resourceInfo } from '@/api/tsm/Resource.js'
import { Back } from '@element-plus/icons-vue'
import { getFileNameWithoutExtName } from '../../utils/ruoyi.js'
import VideoPlayer from '@/components/VideoPlayer/index.vue'
import useUserStore from '@/store/modules/user.js'
import { record } from '@/api/data/historydata.js'
import { comment, listComments } from '@/api/tsm/comment.js'
import CourseComment from '@/views/course/components/CourseComment.vue'
import { ElMessage } from 'element-plus'

let router = useRouter()
let userStore = useUserStore()
const resourceId = computed(() => router.currentRoute.value.params.resourceId)
const relationId = computed(() => router.currentRoute.value.params.relationId)
let resourceData = ref({})
let commentsData = ref([])
let stemp = 10 * 1000
let interval = null
const commentText = ref()

onMounted(() => {
  resourceInfo(resourceId.value).then(response => {
    resourceData.value = response.data
  })
  initComments()
})

function initComments() {
  listComments(relationId.value).then((response) => {
    commentsData.value = response.data
  })
}

function ontimeupdateHandler(e) {
  // console.log(e)
}

function onPlayHandler(e) {
  interval = setInterval(() => {
    record(userStore.id, relationId.value, stemp).then((response) => {
      console.log(response)
    })
  }, stemp)
}

function onEndHandler() {
  record(userStore.id, relationId.value, stemp).then((response) => {
    console.log(response)
  })
}

function onPauseHandler(e) {
  if (interval != null)
    clearInterval(interval)
}

function backHandler() {
  router.back()
}

function sendComment() {
  let data = {
    userId: userStore.id,
    courseTimeId: relationId.value,
    parentId: '0',
    comment: commentText.value
  }
  comment(data).then(() => {
    ElMessage.success("评论成功");
    initComments();
  })
}

function replayOtherUserHandler(data) {
  comment(data).then(() => {
    ElMessage.success("评论成功");
    initComments();
  })
}
</script>
<style scoped lang="scss">
.play-header {
  display: flex;
  align-items: center;

  h3 {
    margin-left: 0.5em;
  }
}

.play-main-container {
  border-radius: 12px;
  overflow: hidden;
  transition: 0.5s;

}

.user-comment-form {
  display: flex;
  align-items: center;
  justify-content: space-between;

  > div {
    display: flex;
    align-items: center;
    white-space: nowrap
  }
}
</style>